
*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
ul.slides{
    position: relative;
    width: 600px;
    height: 280px;
    list-style: none;
    background-color: skyblue;
    /* 将突出的第二和第三张图隐藏 */
    overflow: hidden; 
}
li.slide{
    width: inherit; 
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Helvetica;
    font-size: 120px;
    color: rgb(196, 21, 21);
    transition:  .5s transform ease-in-out;
}

/* 加入三个选择器，分别设置三张轮播图的背景颜色 */
/* :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. */
.slide:nth-of-type(1){
    background-color: #ccc;
}
.slide:nth-of-type(2){
    background-color: khaki;
    /* 第二张图要在第一张图的右边，所以可以设置为left：100% */
    left:100% 
    }
.slide:nth-of-type(3){
    background-color: rgb(134, 93, 124);
    left:200%
}
/* 属性选择器，用于选择带有指定值属性的元素 */
input[type="radio"]{
    position: relative;
    /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。,仅在定位元素上生效 */
    /* 所有效果完成之后可以将z-index去掉，因为此时的display显示为none */
    z-index: 100; 
    display: none;
}
.controls-visible{
    position: absolute;
    width: 100%;
    bottom: 12px;
    text-align: center;
}
.controls-visible label{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    /* 变为圆形 */
    border-radius: 50%;
    margin: 0 3px;
    border:2px solid #FFF
}
/* 判断第一个radio是否处于已选择的状态 ,如果是，则找到里面的第一个label*/
.slides input[type="radio"]:nth-of-type(1):checked ~ .controls-visible label:nth-of-type(1){
    background-color: #333;
}
    /* 判断第二个radio是否处于已选择的状态 ,如果是，则找到里面的第二个label*/
    .slides input[type="radio"]:nth-of-type(2):checked ~ .controls-visible label:nth-of-type(2){
    background-color: #333;
}
    /* 判断第三个radio是否处于已选择的状态 ,如果是，则找到里面的第三个label*/
    .slides input[type="radio"]:nth-of-type(3):checked ~ .controls-visible label:nth-of-type(3){
    background-color: #333;
}

/* 设置轮播图的效果 */ 
/* 当选中第一个radio按钮之后，后面三张 .slide的样式 */
/* 因为我们已经将三张图片的样式横向排列了，所以只需要根据radio按钮，将三个slide向左移动特定的距离即可 */
/* 添加完成后，因为切换很生硬，所以回到slide选择器中加入动画的过渡 */
.slides input[type="radio"]:nth-of-type(1):checked ~ .slide{
    transform: translate(0%);
}
.slides input[type="radio"]:nth-of-type(2):checked ~ .slide{
    /* 向左移动一倍的宽度 */
    transform: translate(-100%);
}
.slides input[type="radio"]:nth-of-type(3):checked ~ .slide{
    transform: translate(-200%);
}
      